<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate" />
        </ion-buttons>
        <ion-title>
            <h1>
                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="lesson?.coursemodule" [courseId]="courseId" />
            </h1>
        </ion-title>
        <ion-buttons slot="end">
            @if (displayMenu || mediaFile) {
                <ion-button fill="clear" [ariaLabel]="'addon.mod_lesson.lessonmenu' | translate" (click)="showMenu()">
                    <ion-icon name="fas-list-ul" slot="icon-only" aria-hidden="true" />
                </ion-button>
            }
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content class="limited-width">
    <core-loading [hideUntil]="loaded">
        <!-- Info messages. Only show the first one. -->
        @if (lesson && messages?.length) {
            <ion-card class="core-info-card">
                <ion-item class="ion-text-wrap">
                    <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
                    <ion-label>{{ messages[0].message }}</ion-label>
                </ion-item>
            </ion-card>
        }

        @if (lesson) {
            <div [class.addon-mod_lesson-slideshow]="lesson.slideshow" [style.width]="lessonWidth" [style.height]="lessonHeight">

                @if (endTime) {
                    <core-timer [endTime]="endTime" (finished)="timeUp()" [timeLeftClassThreshold]="-1"
                        [timerText]="'addon.mod_lesson.timeremaining' | translate" />
                }

                <!-- Retake and ongoing score. -->
                @if (showRetake && !eolData && !processData) {
                    <ion-item class="ion-text-wrap">
                        <ion-label>
                            <p>{{ 'addon.mod_lesson.attempt' | translate:{$a: retake} }}</p>
                        </ion-label>
                    </ion-item>
                }
                @if (pageData && pageData.ongoingscore && !eolData && !processData) {
                    <ion-item class="addon-mod_lesson-ongoingscore ion-text-wrap">
                        <ion-label>{{ pageData.ongoingscore }}</ion-label>
                    </ion-item>
                }

                <!-- Page content. -->
                @if (!eolData && !processData) {
                    <ion-card>
                        <!-- Content page. -->
                        @if (!question && pageContent) {
                            <ion-item class="ion-text-wrap">
                                <ion-label>
                                    <core-format-text [component]="component" [componentId]="lesson.coursemodule" [text]="pageContent"
                                        contextLevel="module" [contextInstanceId]="lesson.coursemodule" [courseId]="courseId" />
                                </ion-label>
                            </ion-item>
                        }

                        <!-- Question page. -->
                        <!-- We need to set ngIf loaded to make formGroup directive restart every time a page changes, see MOBILE-2540. -->
                        @if (question && loaded) {
                            <form [formGroup]="questionForm" #questionFormEl (ngSubmit)="submitQuestion($event)">

                                @if (pageContent) {
                                    <ion-item-divider class="ion-text-wrap">
                                        <ion-label>
                                            <h2>
                                                <core-format-text [component]="component" [componentId]="lesson.coursemodule"
                                                    [text]="pageContent" contextLevel="module" [contextInstanceId]="lesson.coursemodule"
                                                    [courseId]="courseId" />
                                            </h2>
                                        </ion-label>
                                    </ion-item-divider>
                                }

                                <!-- Render a different input depending on the type of the question. -->
                                @switch (question.template) {
                                    @case ('shortanswer') {
                                        <ion-item class="ion-text-wrap">
                                            <ion-input [type]="question.input!.type"
                                                placeholder="{{ 'addon.mod_lesson.youranswer' | translate }}"
                                                [ariaLabel]="'addon.mod_lesson.youranswer' | translate" [id]="question.input!.id"
                                                [formControlName]="question.input!.name" autocorrect="off"
                                                [maxlength]="question.input!.maxlength" />
                                        </ion-item>
                                    }
                                    @case ('essay') {
                                        @if (question.textarea) {
                                            <ion-item>
                                                <ion-label class="sr-only">{{ 'core.content' | translate }}</ion-label>
                                                <core-rich-text-editor placeholder="{{ 'addon.mod_lesson.youranswer' | translate }}"
                                                    [control]="question.control" [component]="component" [componentId]="lesson.coursemodule"
                                                    [autoSave]="true" contextLevel="module" [contextInstanceId]="lesson.coursemodule"
                                                    elementId="answer_editor" />
                                            </ion-item>
                                        } @else if (question.useranswer) {
                                            <ion-item class="ion-text-wrap">
                                                <ion-label>
                                                    <p class="item-heading">{{ 'addon.mod_lesson.youranswer' | translate }}</p>
                                                    <p>
                                                        <core-format-text [component]="component" [componentId]="lesson.coursemodule"
                                                            [text]="question.useranswer" contextLevel="module"
                                                            [contextInstanceId]="lesson.coursemodule" [courseId]="courseId" />
                                                    </p>
                                                </ion-label>
                                            </ion-item>
                                        }
                                    }
                                    @case ('multichoice') {
                                        @if (!question.multi) {
                                            <!-- Single choice. -->
                                            <ion-radio-group [formControlName]="question.controlName">
                                                <ion-item class="ion-text-wrap" *ngFor="let option of question.options">
                                                    <ion-radio [id]="option.id" [value]="option.value" [disabled]="option.disabled">
                                                        <core-format-text [component]="component" [componentId]="lesson.coursemodule"
                                                            [text]="option.text" contextLevel="module"
                                                            [contextInstanceId]="lesson.coursemodule" [courseId]="courseId" />
                                                    </ion-radio>
                                                </ion-item>
                                            </ion-radio-group>
                                        } @else {
                                            <!-- Multiple choice. -->

                                            <ion-item class="ion-text-wrap" *ngFor="let option of question.options">
                                                <ion-checkbox [id]="option.id" [formControlName]="option.name">
                                                    <core-format-text [component]="component" [componentId]="lesson.coursemodule"
                                                        [text]="option.text" contextLevel="module" [contextInstanceId]="lesson.coursemodule"
                                                        [courseId]="courseId" />
                                                </ion-checkbox>
                                            </ion-item>
                                        }
                                    }
                                    @case ('matching') {
                                        <ion-item class="ion-text-wrap" *ngFor="let row of question.rows">
                                            <ion-select [id]="row.id" [formControlName]="row.name" [cancelText]="'core.cancel' | translate"
                                                interface="action-sheet">
                                                <core-format-text slot="label" [component]="component" [componentId]="lesson.coursemodule"
                                                    [text]="row.text" contextLevel="module" [contextInstanceId]="lesson.coursemodule"
                                                    [courseId]="courseId" />
                                                <ion-select-option *ngFor="let option of row.options" [value]="option.value">
                                                    <core-format-text [clean]="true" [text]="option.label" />
                                                </ion-select-option>
                                            </ion-select>
                                        </ion-item>
                                    }
                                }

                                <ion-button expand="block" type="submit" class="ion-text-wrap ion-margin">
                                    {{ question.submitLabel }}
                                </ion-button>
                                <!-- Remove this once Ionic fixes this bug: https://github.com/ionic-team/ionic-framework/issues/19368 -->
                                <input type="submit" class="core-submit-hidden-enter" />
                            </form>
                        }
                    </ion-card>
                }

                <!-- Page buttons and progress. -->
                @if (!eolData && !processData) {
                    <ion-list>
                        @if (pageButtons?.length) {
                            <ion-grid class="ion-text-wrap addon-mod_lesson-pagebuttons">
                                <ion-row class="ion-align-items-center">
                                    <ion-col *ngFor="let button of pageButtons" size="12" size-md="6" size-lg="3" col-xl>
                                        <ion-button expand="block" fill="outline" [id]="button.id" (click)="buttonClicked(button.data)"
                                            class="ion-text-wrap">
                                            {{ button.content }}
                                        </ion-button>
                                    </ion-col>
                                </ion-row>
                            </ion-grid>
                        }
                        @if (lesson.progressbar && !canManage && pageData) {
                            <ion-item class="ion-text-wrap">
                                <ion-label>
                                    <span id="addon-mod_lesson-{{cmId}}-progress">
                                        {{ 'addon.mod_lesson.progresscompleted' | translate:{$a: pageData.progress} }}
                                    </span>
                                    <core-progress-bar [progress]="pageData.progress"
                                        ariaDescribedBy="addon-mod_lesson-{{cmId}}-progress" />
                                </ion-label>
                            </ion-item>
                        }
                        @if (lesson.progressbar && canManage) {
                            <ion-card class="core-info-card">
                                <ion-item class="ion-text-wrap">
                                    <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
                                    <ion-label>{{ 'addon.mod_lesson.progressbarteacherwarning2' | translate }}</ion-label>
                                </ion-item>
                            </ion-card>
                        }
                    </ion-list>
                }

                @if (eolData && !processData) {
                    @if (eolData.offline?.value) {
                        <!-- End of lesson reached. -->
                        <ion-card class="core-warning-card">
                            <ion-item>
                                <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
                                <ion-label>{{ 'addon.mod_lesson.finishretakeoffline' | translate }}</ion-label>
                            </ion-item>
                        </ion-card>
                    }

                    <ion-card>
                        @if (eolData.gradelesson) {
                            <ion-card-header class="ion-text-wrap">
                                <ion-card-title>{{ 'addon.mod_lesson.congratulations' | translate }}</ion-card-title>
                            </ion-card-header>
                        }
                        @if (eolData.notenoughtimespent) {
                            <ion-item class="ion-text-wrap">
                                <ion-label>{{ eolData.notenoughtimespent.message }}</ion-label>
                            </ion-item>
                        }
                        @if (eolData.numberofpagesviewed) {
                            <ion-item class="ion-text-wrap">
                                <ion-label>{{ eolData.numberofpagesviewed.message }}</ion-label>
                            </ion-item>
                        }
                        @if (eolData.youshouldview) {
                            <ion-item class="ion-text-wrap">
                                <ion-label>{{ eolData.youshouldview.message }}</ion-label>
                            </ion-item>
                        }
                        @if (eolData.numberofcorrectanswers) {
                            <ion-item class="ion-text-wrap">
                                <ion-label>{{ eolData.numberofcorrectanswers.message }}</ion-label>
                            </ion-item>
                        }
                        @if (eolData.displayscorewithessays) {
                            <ion-item class="ion-text-wrap">
                                <ion-label [innerHTML]="eolData.displayscorewithessays.message" />
                            </ion-item>
                        } @else if (eolData.displayscorewithoutessays) {
                            <ion-item class="ion-text-wrap">
                                <ion-label>{{ eolData.displayscorewithoutessays.message }}</ion-label>
                            </ion-item>
                        }
                        @if (eolData.yourcurrentgradeisoutof) {
                            <ion-item class="ion-text-wrap">
                                <ion-label>{{ eolData.yourcurrentgradeisoutof.message }}</ion-label>
                            </ion-item>
                        }
                        @if (eolData.eolstudentoutoftimenoanswers) {
                            <ion-item class="ion-text-wrap">
                                <ion-label>{{ eolData.eolstudentoutoftimenoanswers.message }}</ion-label>
                            </ion-item>
                        }
                        @if (eolData.welldone) {
                            <ion-item class="ion-text-wrap">
                                <ion-label>{{ eolData.welldone.message }}</ion-label>
                            </ion-item>
                        }
                        @if (lesson.progressbar && eolData.progresscompleted) {
                            <ion-item class="ion-text-wrap">
                                <ion-label>
                                    <span id="addon-mod_lesson-{{cmId}}-progress-end">
                                        {{ 'addon.mod_lesson.progresscompleted' | translate:{$a: eolData.progresscompleted.value} }}
                                    </span>
                                    <core-progress-bar [progress]="eolData.progresscompleted.value"
                                        ariaDescribedBy="addon-mod_lesson-{{cmId}}-progress-end" />
                                </ion-label>
                            </ion-item>
                        }
                        @if (eolData.displayofgrade) {
                            <ion-item class="ion-text-wrap">
                                <ion-label>{{ eolData.displayofgrade.message }}</ion-label>
                            </ion-item>
                        }
                        @if (eolData.reviewlesson) {
                            <ion-button expand="block" class="ion-text-wrap ion-margin" (click)="reviewLesson(reviewPageId!)">
                                {{ 'addon.mod_lesson.reviewlesson' | translate }}
                            </ion-button>
                        }
                        @if (eolData.modattemptsnoteacher) {
                            <ion-item class="ion-text-wrap">
                                <ion-label>{{ eolData.modattemptsnoteacher.message }}</ion-label>
                            </ion-item>
                        }
                        <!-- If activity link was successfully formatted, render the button. -->
                        @if (activityLink && activityLink.formatted) {
                            <ion-button expand="block" fill="outline" [href]="activityLink.href" core-link [capture]="true"
                                class="ion-text-wrap ion-margin">
                                <core-format-text [text]="activityLink.label" contextLevel="module"
                                    [contextInstanceId]="lesson.coursemodule" [courseId]="courseId" />
                            </ion-button>
                        }
                        @if (activityLink && !activityLink.formatted) {
                            <ion-item class="ion-text-wrap">
                                <!-- Activity link wasn't formatted, render the original link. -->
                                <ion-label>
                                    <core-format-text [text]="activityLink.label" contextLevel="module"
                                        [contextInstanceId]="lesson.coursemodule" [courseId]="courseId" />
                                </ion-label>
                            </ion-item>
                        }
                    </ion-card>
                }

                <!-- Feedback returned when processing an action. -->
                @if (processData) {
                    <ion-list>
                        @if (processData.ongoingscore && !processData.reviewmode) {
                            <ion-item class="ion-text-wrap">
                                <ion-label>{{ processData.ongoingscore }}</ion-label>
                            </ion-item>
                        }
                        @if (!processData.reviewmode || review) {
                            <ion-item class="ion-text-wrap">
                                <ion-label>
                                    @if (!processData.reviewmode) {
                                        <div>
                                            <core-format-text [component]="component" [componentId]="lesson.coursemodule"
                                                [text]="processData.feedback" contextLevel="module"
                                                [contextInstanceId]="lesson.coursemodule" [courseId]="courseId" />
                                        </div>
                                    }
                                    @if (review) {
                                        <div>
                                            <p>{{ 'addon.mod_lesson.gotoendoflesson' | translate }}</p>
                                            <p>{{ 'addon.mod_lesson.or' | translate }}</p>
                                            <p>{{ 'addon.mod_lesson.continuetonextpage' | translate }}</p>
                                        </div>
                                    }
                                </ion-label>
                            </ion-item>
                        }

                        @if (review) {
                            <ion-button expand="block" class="ion-text-wrap ion-margin" (click)="changePage(lessonEol)">
                                {{ 'addon.mod_lesson.finish' | translate }}
                            </ion-button>
                        }
                        <ion-button expand="block" class="ion-text-wrap ion-margin" fill="outline" *ngFor="let button of processDataButtons"
                            (click)="changePage(button.pageId, true)">
                            {{ button.label | translate }}
                        </ion-button>
                    </ion-list>
                }
            </div>
        }
    </core-loading>
</ion-content>
